<!-- Query Parameters Section -->
<section type="query-parameters" label="QUERY PARAMETERS"
         [counterItems]="queryParameters()"
         [contextHelp]="contextHelp()" [expanded]="showSectionBody"
         [collaborationNodePath]="queryParameterPaths()"
         [validationModels]="queryParameters()">
    <span actions>
        <icon-button (onClick)="openAddQueryParamEditor()" [pullRight]="true" type="add"
                     [title]="'Add a new query parameter.'"></icon-button>
        <icon-button (onClick)="deleteAllQueryParams()" [disabled]="!hasQueryParameters()"
                     [pullRight]="true" type="delete"
                     [title]="'Delete all query parameters.'"></icon-button>
    </span>
    <div body>
        <signpost *ngIf="!hasQueryParameters()">
            <span>No query parameters have been defined.</span>
            <a (click)="openAddQueryParamEditor()">Add a query parameter</a>
        </signpost>

        <!-- The list of query parameters -->
        <div class="container-fluid query-parameters typed-item-list" *ngIf="hasQueryParameters()">
            <query-param-row *ngFor="let param of queryParameters()" [item]="param"
                             (onRename)="openRenameDialog(param)"
                             (onDelete)="deleteParam(param)"></query-param-row>
        </div>
    </div>
</section>
<rename-entity-dialog #renameDialog
                      type="Query Parameter"
                      title="Rename Query Parameter"
                      warning="Renaming a Query Parameter may also update any query parameters with the same name depending on path and operation hierarchies."
                      validationPattern="[a-zA-Z0-9\.\-_\$]+"
                      (onRename)="rename($event)"></rename-entity-dialog>
